<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=path%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/reg.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/headbott.css" type="text/css" />
<link rel="stylesheet" href="css/ace.min.css" type="text/css" />
</head>

<body>
	<div id="header">
		<jsp:include page="/WEB-INF/view/navigation.jsp"></jsp:include>
	</div>
	<div class="login-container">

		<div class="space-6"></div>

		<div class="position-relative">
			<div id="signup-box" class="signup-box widget-box no-border">
				<div class="widget-body">
					<div class="widget-main">
						<h4 class="header green lighter bigger">
							<i class="ace-icon fa fa-users blue"></i> 用户注册
						</h4>

						<div class="space-6"></div>
						<p>填写信息:</p>

						<form>
							<fieldset>
								<label class="block clearfix"> <span
									class="block input-icon input-icon-left"> <input
										type="text" id="phones" name="phone" class="form-control"
										placeholder="手机号" /> <span id="msg"></span><i
										class="ace-icon fa fa-envelope"></i>
								</span>
								</label> <label class="block clearfix"> <span
									class="block input-icon input-icon-left"> <input
										type="text" id="name" name="username" class="form-control"
										placeholder="用户名" /> <span id="msg2"></span> <i
										class="ace-icon fa fa-user"></i>
								</span>
								</label> <label class="block clearfix"> <span
									class="block input-icon input-icon-left"> <input
										type="password" id="pwd" name="password" class="form-control"
										placeholder="密码" /> <span id="msg3"></span> <i
										class="ace-icon fa fa-lock"></i>
								</span>
								</label> <label class="block clearfix"> <span
									class="block input-icon input-icon-left"> <input
										type="password" id="pwd2" class="form-control"
										placeholder="确认密码" /> <span id="msg4"></span> <i
										class="ace-icon fa fa-retweet"></i>
								</span>
								</label>
								<!--验证码-->
								<label class="block clearfix"> <span> <input
										type="text" id="code" name="code" placeholder="验证码" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

										<button type="button" class="btn btn-default"
											onclick="checkCode()">
											<p>点击获取验证码</p>
										</button> 
								</span>
								</label> <label class="block"> <input type="checkbox"
									onclick="if (this.checked) {enable()} else {disable()}"
									class="ace" /> <span class="lbl"> 接受 <a
										href="javascript:void(0)" id="checkAgree">用户协议</a>
								</span>
								</label>

								<div class="space-24"></div>

								<div class="clearfix">
									<button type="reset" class="width-30 pull-left btn btn-sm">
										<i class="ace-icon fa fa-refresh"></i> <span
											class="bigger-110">重置</span>
									</button>
									
								 <button type="button"
								 		id="accept"
								 		disabled="true"
										class="width-65 pull-right btn btn-sm btn-success"
										onclick="checkregister()"
										>
										<span class="bigger-110">注册</span> <i
											class="ace-icon fa fa-arrow-right icon-on-right"></i>
									</button>
									<span id="msg5"></span>
								</div>
							</fieldset>
						</form>
						<!--第三方-->
						<div class="social-or-login center">
							<span class="bigger-110">注册之后，即可享受众筹的魅力</span>
						</div>

						<div class="space-6"></div>

						<div class="social-login center">
							<a href="#"> </a> <a href="#"> </a> <a href="#"> </a>
						</div>
					</div>

					<div class="toolbar center">
						<a href="user/to/login" data-target="#login-box"
							class="back-to-login-link"> <i
							class="ace-icon fa fa-arrow-left"></i> 返回登录
						</a>
					</div>
				</div>
				<!-- /.widget-body -->
			</div>
		</div>
	</div>
	<div id="bottom">
		<jsp:include page="/WEB-INF/view/tail.jsp"></jsp:include>
	</div>
	<script type="text/javascript">
		var flag = 0;
		function checkPhone() {
			var regex = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
			var phone = $("#phones").val();
			if (!regex.test(phone)) {
				$("#msg").html("请输入正确的手机号")
				flag = 101;
			} else {
				//发起ajax请求验证手机号是否已被注册
				$.ajax({
					type : 'POST',
					url : 'user/checkphone',
					async : false,
					data : {
						"phone" : $("#phones").val()
					},
					dataType : 'json',
					success : function(data) {
						if (data.code == 200) {
							$("#msg").html("")
							flag = 200;
						} else {
							$("#msg").html(data.data)
							flag = 102;
						}
					},
					error : function(msg) {
						alert("网络异常");
					}
				});

			}
			return flag;
		}
		//手机号输入框失去焦点事件
		$("#phones")
				.blur(
						function() {
							var regex = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
							var phone = $("#phones").val();
							if (!regex.test(phone)) {
								$("#msg").html("请输入正确的手机号")
							} else {
								//发起ajax请求验证手机号是否已被注册
								$.ajax({
									type : 'POST',
									url : 'user/checkphone',
									async : true,
									data : {
										"phone" : $("#phones").val()
									},
									dataType : 'json',
									success : function(data) {
										if (data.code == 200) {
											$("#msg").html("")
										} else {
											$("#msg").html(data.data)
										}
									},
									error : function(msg) {
										alert("网络异常");
									}
								});

							}
						})

		//效验用户名是否可用
		var flag2 =0;
		function user(){
			var pattern = /^[a-zA-Z0-9]{3,15}$/;
			var name = $("#name").val();
			if (!pattern.test(name)) {
				$("#msg2").html("请输入3到16位的字母数字")
				flag2=101;
			} else {
				$.ajax({
					type : 'POST',
					url : 'user/checkname',
					async : false,
					data : {
						"name" : name
					},
					dataType : 'json',
					success : function(data) {
						if (data.code == 200) {
							$("#msg2").html("")
							flag2=200;
						} else {
							$("#msg2").html(data.data)
							flag2=102;
						}
					},
					error : function(msg) {
						alert("网络异常");
					}
				});
			}
			return flag2;
		}
		//调用效验用户名方法
		$("#name").blur(function() {
			user();
		})

		//效验密码是否能用
		var flag3 =0;
		function password(){
			var pattern = /^[a-zA-Z0-9]{3,15}$/;
			var pwd = $("#pwd").val();
			if (!pattern.test(pwd)) {
				$("#msg3").html("请输入3到15位的字母数字")
				flag3=101;
			} else {
				$("#msg3").html("")
				flag3=200;
			}
			return flag3;
		}
		//调用效验密码方法
		$("#pwd").blur(function() {
			password();
		})
		
		//效验确认秘密是否和第一次相同
		var flag4 =0;
		function password2(){
			var pwd = $("#pwd").val();
			var pwd2 = $("#pwd2").val();
			if (pwd != pwd2) {
				$("#msg4").html("请输入相同的密码")
				flag4=101;
			} else {
				$("#msg4").html("")
				flag4=200;
			}
			return flag4;
		}
		//调用确认秘密是否和第一次相同方法	
		$("#pwd2").blur(function() {
			password2();
		})

		function checkCode() {
			var flag = checkPhone();
			if (flag == 200) {
				$.ajax({
					type : 'POST',
					url : 'user/checkcode',
					async : true,
					data : {
						"phone" : $("#phones").val()
					},
					dataType : 'json',
					success : function(data){
						alert("发送成功");
					},
					error : function(msg) {
						alert("网络异常,发送失败");
					}
				});
			} else if (flag == 101) {
				alert("请输入正确的手机号");
			} else {
				alert("手机号已注册,重新填写手机号")
			}
		}
			
			function chockCode2(){
			var reg=/^\d{5,6}$/;    
			var code=$("#code").val();
			if(!reg.test(code)){
				return false;
			}else{
				return true;
			}
		}
		//执行注册方法
	 	function checkregister(){
				var flag = checkPhone();
	 			var flag2 = user();
	 			var flag3= password();
	 			var flag4 =password2();
			if(!chockCode2()){
				alert("请填写正确的格式的验证码");
			}else{
				if(flag==101){
					alert("请输入正确格式的手机号");
				}else if(flag==102){
					alert("手机号已注册,请重新输入手机号");
				}else if(flag2==101){
					alert("请输入正确格式的用户名");
				}else if(flag2==102){
					alert("用户名已注册,请重新输入用户名");
				}else if(flag3==101){
					alert("请输入正确格式的密码");
				}else if(flag4==101){
					alert("请输入一样的密码");
				}else{
					$.ajax({
						type : 'POST',
						url : 'user/register',
						async : true,
						data : {
							"username":$("#name").val(),
							"phone" : $("#phones").val(),
							"code": $("#code").val(),
							"password": $("#pwd2").val()
						},
						dataType : 'json',
						success : function(data) {
							if (data.code == 200) {
								//跳转到一个controller并传递参数
								alert(data.data);
								window.location.href="/Crowdfunding/user/too/login?phone="+$("#phones").val()+"";
								
							} else {
								alert(data.msg);
							}
						},
						error : function(msg) {
							alert("网络异常");
						}
					});
				}
				
			}
		} 
		function disable()
		  {
		  document.getElementById("accept").disabled=true
		  }
		function enable()
		  {
		  document.getElementById("accept").disabled=false
		  }
	</script>
</body>
</html>
